<template>
	<view class="bind_house">
		<u-navbar rightIcon="checkbox-mark" title="绑定门牌号" @rightClick="rightClick" :placeholder="true">

		</u-navbar>
		<view class="content">
			<view class="main">
				<u-cell title="选择小区" :value="xiaoqu" :isLink="true" arrow-direction="right" @click="get_residential">
				</u-cell>
				<u-picker :show="xiaoqu_show" :columns="xiaoqu_columns" keyName="village" @confirm="xiaoquConfirm">
				</u-picker>


				<u-cell title="选择楼栋" :value="lou" :isLink="true" arrow-direction="right" @click="get_building"></u-cell>
				<u-picker :show="lou_show" :columns="lou_columns" keyName="buildingName" @confirm="buildingConfirm">
				</u-picker>

				<u-cell title="选择单元" :value="danyuan" :isLink="true" arrow-direction="right" @click="get_unit"></u-cell>
				<u-picker :show="danyuan_show" :columns="danyuan_columns" keyName="unitName" @confirm="unitConfirm">
				</u-picker>

				<u-cell title="选择门牌号" :value="Doorplate" :isLink="true" arrow-direction="right" @click="get_doorplate">
				</u-cell>
				<u-picker :show="Doorplate_show" :columns="Doorplate_columns" keyName="doorplateName"
					@confirm="doorplateConfirm"></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResidential,
		getBuilding,
		getUnit,
		getDoorplate,bind_doorplate
	} from "@/api/user.js"



	export default {
		data() {
			return {
				xiaoqu: '',
				xiaoqu_id: '',
				xiaoqu_show: false,
				xiaoqu_columns: [],
				lou: '',
				lou_id: '',
				lou_columns: [],
				lou_show: false,
				danyuan: '',
				danyuan_id: '',
				danyuan_show: false,
				danyuan_columns: [],
				Doorplate: '',
				Doorplate_show: false,
				Doorplate_columns: []

			}
		},
		methods: {
			rightClick(){
				let {Doorplate}=this
				bind_doorplate(Doorplate).then(res=>{
				if(res.code==200){
					this.$store.dispatch('users/getUserInfo').then(res=>{
						uni.navigateTo({
							url:'/pages/user/userInfo'
						})
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.hideToast()
						uni.navigateTo({
							url:'/pages/user/userInfo'
						})
					},1500)
				}
				})
				
			},
			get_doorplate() {
				this.Doorplate_columns = []
				let {
					danyuan_id
				} = this
				getDoorplate(
					danyuan_id
				).then(res => {

					this.Doorplate_columns.push(res.data)
					this.Doorplate_show = true

				})


			},
			doorplateConfirm(e) {
				this.Doorplate = e.value[0].doorplateName
				this.Doorplate_show = false
			},



			get_unit() {
				this.danyuan_columns = []
				let {
					lou_id
				} = this
				getUnit(
					lou_id
				).then(res => {
					this.danyuan_columns.push(res.data)
					this.danyuan_show = true

				})


			},
			unitConfirm(e) {
				this.danyuan = e.value[0].unitName
				this.danyuan_id = e.value[0].id

				this.danyuan_show = false
			},



			get_building() {
				this.lou_columns = []
				let {
					xiaoqu_id
				} = this
				getBuilding(
					xiaoqu_id
				).then(res => {

					this.lou_columns.push(res.data)
					this.lou_show = true
					console.log(this.lou_columns)
				})
				console.log(this.xiaoqu_id)


			},
			buildingConfirm(e) {
				this.lou = e.value[0].buildingName
				this.lou_id = e.value[0].id
				console.log(this.lou, this.lou_id)
				this.lou_show = false
			},


			get_residential() {
				this.xiaoqu_columns = []
				getResidential().then(res => {
					this.xiaoqu_columns.push(res.data)
					console.log(this.xiaoqu_columns)
					this.xiaoqu_show = true
				})


			},
			xiaoquConfirm(e) {
				this.xiaoqu = e.value[0].village
				this.xiaoqu_id = e.value[0].id
				console.log(this.xiaoqu, this.xiaoqu_id)
				this.xiaoqu_show = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content__left[data-v-95dec1ae] {
		display: none;
	}

	.bind_house {
		width: 750rpx;
		height: 100vh;
		background-color: aliceblue;

		.content {
			width: 750rpx;
			padding: 26rpx;
			box-sizing: border-box;

			.main {
				box-sizing: border-box;
				border-radius: 20rpx;
				width: 100%;
				background-color: #fff;
			}
		}
	}
</style>
